<template>
    <div class="wrapper" :style="mainStyle">
        <navigation-bar :title="title" :onLeftButtonClick="function(){toBack()}"
                        :rightIcon="' '"></navigation-bar>
        <wxc-dialog :title="dialogModle.title"
                    :content="dialogModle.content"
                    :show="dialogModle.show"
                    :single="false"
                    :is-checked="false"
                    @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                    @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked">
        </wxc-dialog>
        <r-l-list ref="dylist" :listItemName="itemClass" :listData="list"
                  :headerComponent="head"
                  :listHeight="listHeight"
                  :headerClick="headerClick"
                  :forLoadMore="onLoadMore" :forRefresh="onRefresh" :itemClick="itemClick"></r-l-list>
    </div>
</template>

<script>

  import RLList from './widget/RLList.vue'
  import NavigationBar from './widget/NavigationBar.vue'
  import order from '../core/net/order'
  import course from '../core/net/course'
  import test from '../core/net/test'
  import task from '../core/net/task'
  import { getEntryPageStyle, getListHeight, navigatorbBarHeight } from '../config/Config'
  import { Utils, WxcDialog } from 'weex-ui'

  const modal = weex.requireModule('modal')

  export default {
    props: {},
    components: {RLList, NavigationBar, WxcDialog},
    data () {
      return {
        dialogModle: {
          title: '',
          content: '',
          show: false,
          index: 0,
        },
        showTabBar: false,
        userName: '',
        reposName: '',
        title: '',
        currentPage: 1,
        list: [],
        listHeight: 0,
        itemClass: 'EventItem',
        dataType: '',
        listStatus: '',
        head: '',
        mainStyle: {},
      }
    },
    created: function () {
      this.init()
      this.mainStyle = getEntryPageStyle(Utils)
      this.listHeight = getListHeight(Utils.env.getScreenHeight() - navigatorbBarHeight, Utils)
    },
    mounted: function () {
      this.init()
      this.mainStyle = getEntryPageStyle(Utils)
      this.listHeight = getListHeight(Utils.env.getScreenHeight() - navigatorbBarHeight, Utils)
    },
    activated: function () {
      //keep alive
      if (WXEnvironment.platform === 'Web') {
        this.init()
      }
    },
    methods: {
      init () {
        this.list = []
        if (this.getQuery().title) {
          this.title = this.getQuery().title
        }
        if (this.getQuery().userName) {
          this.userName = this.getQuery().userName
        }
        if (this.getQuery().reposName) {
          this.reposName = this.getQuery().reposName
        }
        if (this.getQuery().head) {
          this.head = this.getQuery().head
        }
        if (this.getQuery().dataType) {
          this.dataType = this.getQuery().dataType
        }
        this.initItemClass()
        this.onRefresh()
      },
      resolveResult (res, type) {
        if (res && res.result) {
          if (type === 1) {
            this.list = res.data
          } else {
            this.list = this.list.concat(res.data)
          }
        }
        if (type === 1) {
          if (this.$refs.dylist) {
            this.$refs.dylist.stopRefresh()
          }
        } else if (type === 2) {
          if (this.$refs.dylist) {
            this.$refs.dylist.stopLoadMore()
          }
        }
        if (this.$refs.dylist) {
          if (!res.data || res.data.length < this.getPageSize()) {
            this.$refs.dylist.setNotNeedLoadMore()
          } else {
            this.$refs.dylist.setNeedLoadMore()
          }
        }
      },
      loadData (type) {
        this.commonGetData(type)
      },
      onLoadMore () {
        this.currentPage++
        this.loadData(2)
      },
      onRefresh () {
        this.currentPage = 1
        this.list = []
        this.loadData(1)
      },
      itemClick (index) {
        let data = this.list[index]
        switch (this.dataType) {
          case 'userTests':
            if (data.ex.is === true) {
              this.jumpWithParams('TestResult', {
                test: data.ex.id,
                type: data.type
              })
            } else {
              this.jumpWithParams('TestDetail', {
                test: data.ex.id,
                desc: data.ex.desc,
                image: data.ex.image,
                is: data.ex.is,
                title: data.name,
              })
            }
            break
          case 'userCourses':
            this.jumpWithParams('CourseDetail', {
              course: data.id,
              title: `${data.name}详情`,
            })
            break
          case 'userTask':
            this.jumpWithParams('TaskDetail', {
              task: data.id,
              title: `课后作业`,
            })
            break
          case 'userOrder':
            this.dialogModle.title = '取消订单'
            this.dialogModle.content = '订单取消后不可撤回，是要继续？'
            this.dialogModle.show = true
            this.dialogModle.index = index
            break
        }
      },
      headerClick (e) {
        switch (this.dataType) {
          case 'userOrder':
            this.listStatus = e
            this.onRefresh()
            break
        }
      },
      wxcDialogCancelBtnClicked () {
        //此处必须设置，组件为无状态组件，自己管理
        this.dialogModle.show = false
      },
      wxcDialogConfirmBtnClicked () {
        let data = this.list[this.dialogModle.index]
        switch (this.dataType) {
          case 'userTests':
            break
          case 'userCourses':
            break
          case 'userOrder':
            order.cancelOrder(data.id).then((res) => {
              if (res.result) {
                modal.toast({message: '取消订单成功'})
                this.onRefresh()
              } else {
                modal.toast({message: '取消订单失败'})
              }
              this.dialogModle.show = false
            })
            break
        }
      },
      isPreparing () {
        return (!this.userName || !this.reposName || this.userName.length < 1 || this.reposName.length < 1)
      },
      initItemClass () {
        switch (this.dataType) {
          case 'userTests':
            this.showTabBar = false
            this.itemClass = 'TestItem'
            break
          case 'userTask':
            this.showTabBar = false
            this.itemClass = 'TaskItem'
            break
          case 'userCourses':
            this.showTabBar = false
            this.itemClass = 'CourseItem'
            break
          case 'userOrder':
            this.showTabBar = true
            this.itemClass = 'OrderItem'
            break
        }
      },
      commonGetData (type) {
        switch (this.dataType) {
          case 'userTests':
            test.getUserTest(this.currentPage)
              .then((res) => {
                this.resolveResult(res, type)
              })
            break
          case 'userCourses':
            course.getUserCourse(this.currentPage)
              .then((res) => {
                this.resolveResult(res, type)
              })
            break
          case 'userTask':
            task.getUserTask(this.currentPage)
              .then((res) => {
                this.resolveResult(res, type)
              })
            break
          case 'userOrder':
            order.getOrderList(this.currentPage, this.listStatus)
              .then((res) => {
                this.resolveResult(res, type)
              })
            break
        }
      },

    },
  }
</script>

<style lang="scss">
    @import '../config/styles.scss';

    .wrapper {
        background-color: $--container-color
    }
</style>
<style scoped>
</style>
